<template>
  <div class="content-wrap">
    <p class="fixed-top-helper"></p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'index4',
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
    };
  },
  mounted() {
    this.haha();
  },
  methods: {
    haha() {
      let list = document.querySelectorAll('ul li');
      let observer = new IntersectionObserver(entries => {
        entries.forEach(item => {
          if (item.isIntersecting) {
            item.target.classList.add('show'); // 增加show类名
            observer.unobserve(item.target); // 移除监听
          }
        });
      });
      list.forEach(item => observer.observe(item));
    }
  }
};
</script>

<style lang="scss" scoped>
.content-wrap {
  .fixed-top-helper {
    height: 600px;
    background: #ccc;
  }
  li {
    padding: 20px;
    background-color: #f5a7a7;
    color: #2a2a2a;
    font-size: 16px;
    &.show {
      // 默认从左边进来
      animation: left 1s ease;
      // 偶数从右边进来
      &:nth-child(2n) {
        animation: right 1s ease;
      }
    }
  }
  @keyframes left {
    from {
      opacity: 0;
      transform: translate(-20px, 20px); // right动画改成20px, 20px即可
    }

    to {
      opacity: 1;
    }
  }
}
</style>
